<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-settings"></i> 设置页面
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
<!--        <div class="handle-box-left">-->
<!--          <el-button type="primary" @click="addVisible = true" round>当前配置/所有配置</el-button>-->
<!--        </div>-->
        <div class="handle-box-right">
          <el-button type="primary" icon="el-icon-plus" @click="addVisible = true" round>新增</el-button>
          <!-- 弹出新增框 -->
          <el-dialog title="新增配置" v-model="addVisible" width="30%">
            <el-form ref="addFormRef" :model="addSetting" label-width="100px" inline="true">
              <el-form-item label="队列长度">
                <el-input v-model="addSetting.queueLen"></el-input>
              </el-form-item>
              <el-form-item label="等候区容量">
                <el-input v-model="addSetting.areaSize"></el-input>
              </el-form-item>

<!--              <el-form-item label="基本调度策略">-->
<!--                <el-radio v-model="addSetting.baseStrategy" label="3">队列调度</el-radio>-->
<!--                <el-radio v-model="addSetting.baseStrategy" label="0">等候区调度</el-radio>-->
<!--                <el-radio v-model="addSetting.baseStrategy" label="1">单次调度</el-radio>-->
<!--                <el-radio v-model="addSetting.baseStrategy" label="2">批量调度</el-radio>-->
<!--              </el-form-item>-->
              <el-form-item label="基本调度策略" >
                <!--                <el-input v-model="addSetting.errorStrategy"></el-input>-->
                <el-select v-model="addSetting.baseStrategy" placeholder="基本调度策略" style="width: 200px">
                  <el-option
                      v-for="item in Strategytions"
                      :key="item.value1"
                      :label="item.label"
                      :value="item.value1">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="故障调度策略">
<!--                <el-input v-model="addSetting.errorStrategy"></el-input>-->
                <el-select v-model="addSetting.errorStrategy" placeholder="故障调度策略" style="width: 200px">
                  <el-option
                      v-for="item in erroroptions"
                      :key="item.value2"
                      :label="item.label"
                      :value="item.value2">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="电费（平价/峰价/谷价）" label-width="180px" inline-message="true">
                <el-input v-model="addSetting.basePrice" style="width: 140px;margin-left: 5px" placeholder="平价电费/度"></el-input>
                <el-input v-model="addSetting.peakPrice" style="width: 140px;margin-left: 5px" placeholder="峰价电费/度"></el-input>
                <el-input v-model="addSetting.bottomPrice" style="width: 140px;margin-left: 5px" placeholder="谷价电费/度"></el-input>
              </el-form-item>
              <el-form-item label="单次调度min">
                <el-input v-model="addSetting.sigSize"></el-input>
              </el-form-item>
              <el-form-item label="每度服务费">
                <el-input v-model="addSetting.servicePrice"></el-input>
              </el-form-item>
              <el-form-item label="经纬度（最大/最小）" label-width="180px" inline-message="true">
                <el-input v-model="addSetting.longitudeMax" style="width: 100px;margin-left: 5px" placeholder="经度最大值"></el-input>
                <el-input v-model="addSetting.longitudeMIN" style="width: 100px;margin-left: 5px" placeholder="经度最小值"></el-input>
                <el-input v-model="addSetting.latitudeMAX" style="width: 100px;margin-left: 5px" placeholder="纬度最大值"></el-input>
                <el-input v-model="addSetting.latitudeMIN" style="width: 100px;margin-left: 5px" placeholder="纬度最小值"></el-input>
              </el-form-item>
              <el-form-item label="超时费/小时">
                <el-input v-model="addSetting.overtimeMoneyPreHour"></el-input>
              </el-form-item>
              <el-form-item label="谷峰区间24位" placeholder="长24位，谷（0）/峰（2）/正常（1）">
                <el-input v-model="addSetting.section"></el-input>
              </el-form-item>

            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveadd">确 定</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>

      <el-table :cell-style="adminstyle" :data="Settinglist" @sort-change="SortChange" @filter-change="filterChange" border class="table" ref="multipleTable" header-cell-class-name="table-header" stripe>
        <el-table-column prop="configurationID" label="ID" width="60%" align="center">
          <template #default="scope">{{scope.row.configurationID}}</template>
        </el-table-column>
        <el-table-column prop="queueLen" label="队列长度" width="90%" align="center">
          <template #default="scope">{{scope.row.queueLen}}</template>
        </el-table-column>
        <el-table-column prop="areaSize" label="等候区容量" width="100%" align="center">
          <template #default="scope">{{scope.row.areaSize}}</template>
        </el-table-column>
        <el-table-column prop="baseStrategy" label="基本调度策略" width="110%" align="center">
          <template #default="scope">{{baseSelectfunc(scope.row.baseStrategy)}}</template>
        </el-table-column>
        <el-table-column prop="sigSize" label="单次调度的最小空位数" width="200%" align="center">
          <template #default="scope">{{scope.row.sigSize}}</template>
        </el-table-column>
        <el-table-column prop="errorStrategy" label="故障调度策略" width="150%" align="center">
          <template #default="scope">{{errorSelectfunc(scope.row.errorStrategy)}}</template>
        </el-table-column>
        <el-table-column label="每度电费（平价/峰价/谷价）" width="200%" align="center">
          <template #default="scope">{{scope.row.basePrice}} / {{scope.row.peakPrice}} / {{scope.row.bottomPrice}}</template>
        </el-table-column>
        <el-table-column label="经度限制（最大/最小）" width="200%" align="center">
          <template #default="scope">{{scope.row.longitudeMax}} / {{scope.row.longitudeMIN}}</template>
        </el-table-column>
        <el-table-column label="纬度限制（最大/最小）" width="200%" align="center">
          <template #default="scope">{{scope.row.latitudeMAX}} / {{scope.row.latitudeMIN}}</template>
        </el-table-column>
        <el-table-column prop="servicePrice" label="每度服务费" width="100%" align="center">
          <template #default="scope">{{scope.row.servicePrice}}</template>
        </el-table-column>
        <el-table-column prop="overtimeMoneyPreHour" label="超时费/小时" width="100%" align="center">
          <template #default="scope">{{scope.row.overtimeMoneyPreHour}}</template>
        </el-table-column>
        <el-table-column prop="section" label="谷峰区间" align="center">
          <template #default="scope">{{scope.row.section}}</template>
        </el-table-column>
        <el-table-column :filters="[
            { text: '当前配置', value: 'true' },
            { text: '可用配置', value: 'false' },
          ]" column-key="filterTag" label="状态" align="center" width="120%">
          <template #default="scope">
            <el-tag :type="
                scope.row.configurationID === this.NowNum
                  ? 'primary'
                  : scope.row.configurationID !== this.NowNum
                  ? 'info'
                  : ''
              ">{{ scope.row.configurationID === this.NowNum ? "当前配置" : "可用配置" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100%" align="center">
          <template #default="scope">
            <div class="flex flex-wrap items-center">
              <el-dropdown>
                <el-button type="primary">
                  操作<el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu align="center">
                    <el-dropdown-item @click="handleActive(scope.$index, scope.row)">应用配置</el-dropdown-item>
                    <el-dropdown-item @click="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item>
                    <el-dropdown-item @click="handleDelete(scope.$index, scope.row)">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" v-model="editVisible" width="30%">
      <el-form label-width="70px">
        <el-form-item label="修改字段">
          <el-select v-model="changeItem" placeholder="请选择">
            <el-option v-for="item in EditItem" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="新值">
          <el-input v-model="newValue"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "basetable",
  data() {
    return {
      //当前配置ID
      NowNum:'',
      //选择对象
      erroroptions: [{
        value2: 0,
        label: '故障优先级调度'
      }, {
        value2: 1,
        label: '故障时间顺序调度'
      }, {
        value2: 2,
        label: '故障队尾调度'
      }, ],
      // value2: '',
      Strategytions: [{
        value1: 0,
        label: '等候区调度'
      }, {
        value1: 1,
        label: '单次调度'
      }, {
        value1: 2,
        label: '批量调度'
      }, {
        value1: 3,
        label: '队列调度'
      },],
      // value1: '',
      // 查询参数对象
      settingInfo: {
        configurationID: null,
        queueLen: null,
        areaSize: null,
        baseStrategy: null,
        sigSize: null,
        errorStrategy: null,
        basePrice: null,
        peakPrice: null,
        bottomPrice: null,
        servicePrice: null,
        section: null,
      },
      addSetting: {
        queueLen: null,
        areaSize: null,
        baseStrategy: null,
        sigSize: null,
        errorStrategy: null,
        basePrice: null,
        peakPrice: null,
        bottomPrice: null,
        servicePrice: null,
        section: '000000112212221112211100',
        longitudeMax: null,
        longitudeMIN: null,
        latitudeMAX: null,
        latitudeMIN: null,
        overtimeMoneyPreHour: null,
      },
      sortItem: [
        {
          value: "chargePileId",
          label: "充电桩ID",
        },
        {
          value: "chargePower",
          label: "充电桩功率",
        },
        {
          value: "chargeHours",
          label: "总充电时间",
        },
        {
          value: "installDate",
          label: "安装时间",
        },
      ],
      // 设置列表
      Settinglist: [],
      // 商品列表
      Pilelist: [],

      // 新增框的显示
      addVisible: false,
      // 编辑框的显示
      editVisible: false,
      // 编辑修改
      changePileID: 1,
      changeItem: "",
      newValue: "",
    };
  },
  created() {
    this.getSetting();
  },
  methods: {
    // 获取所有设置
    async getSetting() {
      this.Settinglist = [];
      const {
        content: settinglist,
      } = await this.$axios.get(
          `conf`
      );
      this.Settinglist = settinglist;
      console.log(this.Settinglist);
      this.getNowSetting();
    },
    async getNowSetting() {
      const {
        content: nowsetting,
      } = await this.$axios.get(
          `conf/now`
      );
      this.NowNum = nowsetting.configurationID;
      console.log("当前配置ID："+nowsetting.configurationID)
    },
    saveadd() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        const { message: res } = await this.$axios.post("conf",  this.addSetting);
        if (res !== "新增配置成功") return this.$message.error("新增失败");
        this.$message.success("新增成功");
        this.addVisible = false;
        this.getSetting();
        console.log(this.addSetting)
      });
    },
    handleActive(index, row) {
      this.$confirm("将应用该方案, 是否确定?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(async () => {
            const res = await this.$axios.put(
                `conf/${row.configurationID}`
            );
            if (res.message != "设置成功")
              return this.$message.error("设置失败");
            this.$message.success("成功应用该配置");
            this.getSetting();
          })
          // .catch(() => {
          //   this.$message({
          //     type: "info",
          //     message: "已取消操作",
          //   });
          // });
    },
    handleDelete(index, row) {
      if (row.configurationID==this.NowNum)
        return
      this.$confirm("将删除该配置方案, 是否确定?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(async () => {
            const res = await this.$axios.delete(`conf/${row.configurationID}`);
            if (res.message != "删除成功")
              return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getSetting();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
    },
    adminstyle({row, column}){
      console.log(row.configurationID)
      if (row.configurationID == this.NowNum && column.id === 'el-table_1_column_1')
        return 'font-weight: bolder; font-size: larger;color:red;';
      return ;
    },
    baseSelectfunc(base){
      if (base === 'SINGLE')
        return '等候区调度';
      else if (base === 'MULTIPLE')
        return '单次调度';
      else if (base === 'BATCH')
        return '批量调度';
      else
        return '队列调度';
    },
    errorSelectfunc(err){
      if (err === 'PRIORITY')
        return '故障优先级调度';
      else if(err === 'SCHEDULE')
        return '故障时间顺序调度';
      else
        return '故障队尾调度';
    }
  },
};
</script>

<style scoped>
.handle-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
